import Ys3dApp from "../../plugins/ys3d/index.js"
const el = document.getElementById('container')
const  app = new Ys3dApp(el, {
    // axes: true,
    // gridHelper: true
    sortObjects: true,
    updateTween: true
})
const scene = app.scene
const renderer = app.renderer
const camera = app.camera
const _3d = app._3d
const clock = new _3d.Clock()
let model
const modelShader = app.modelShader()
const shader3 = app.modelShader()
const directionalLight = new _3d.DirectionalLight( 0xffeedd )
directionalLight.position.set( 0, 0, 1 ).normalize()
scene.add( directionalLight )
const ambientLight = new _3d.AmbientLight('#fff',0.3) // obj 唯一 id
scene.add(ambientLight)
app.initOrbitControls()
const controls = app.controls
controls.maxPolarAngle = Math.PI / 2.2
controls.autoRotate = false
controls.maxDistance = 1000
const composer = app.composer({ //当前仅支持这几个后处理，如要用其他，请自行导入。
    unrealBloom: { //
        renderToScreen: true
    }
})
const bloomPass = composer.bloomPass
bloomPass.strength = 0.5
const textureLoader = new  _3d.TextureLoader()
const labelist = []
const circleList =[]
const scanList = []
let modelTexture
let ok = false
let spriteLightTexture
let spriteLightTexture2
let spriteLightTexture3
let lightBarTexture
let lightBarParticlesTexture
controls.target.set(-232.91,5,31.56)
camera.position.set(-232.910894,5,31.56042)
const cc = camera.position.clone().sub(controls.target.clone())
// gui
/*const gui = new dat.GUI()
const params = new function () {
    this['颜色'] =  0xffffff
}
function addGui(){
    gui.addColor(params, '颜色').onChange(e => {
        shader3.uniforms.gradualColorStart.value = new _3d.Color(e)
    })
}
addGui()*/
/*   ** ** **/
//加载其他模型
const objFileList = [
    {
        type: 'glb',
        url: 'data/a.glb',
        dracoUrl: '../../plugins/ys3d/draco/',
        onLoad: function (glb) {
            const obj = glb.scene
            scene.add(obj)
            model = obj

            modelTexture = textureLoader.load('../../images/ysUi/logo.png')
            modelTexture.repeat.set(1, 1)
            modelTexture.wrapT = _3d.RepeatWrapping

            modelShader.uniforms.gradualPositionYStart.value = 0
            modelShader.uniforms.gradualPositionYEnd.value = 8
            modelShader.uniforms.shaderOpacity.value = 1
            modelShader.uniforms.rowLightWidth.value = 1
            modelShader.uniforms.shaderOpacity.value = 1
            modelShader.uniforms.circleWidth.value = 5
            modelShader.uniforms.gradualColorStart.value = new _3d.Color('#001333')
            modelShader.uniforms.gradualColorEnd.value = new _3d.Color('#0303ff')
            modelShader.uniforms.colorCircle.value = new _3d.Color('#00FFFF')
            modelShader.uniforms.rowLightColor.value = new _3d.Color('#02fffc')
            modelShader.uniforms.selfTexture.value = modelTexture
            const modelMaterial =  new _3d.ShaderMaterial({
                uniforms: modelShader.uniforms,
                vertexShader: modelShader.vs,
                fragmentShader: modelShader.fs,
                side: _3d.DoubleSide,
                /*lights: true*/
                // transparent: true
            })
            model.material = modelMaterial
            model.traverse(e => {
                e.material = modelMaterial
                e.renderOrder = app.renderOrder ++
            })
        }
    },
    {
        type: 'obj',
        url: 'data/baida.obj',
        onLoad: function (object) {
            object.scale.set(0.025,0.05,0.025)
            object.rotateY( -Math.PI / 2)
            object.position.set(-11.7,0.1,43.5)

            object.traverse(e => {
                e.material =  new _3d.ShaderMaterial({
                    uniforms: shader3.uniforms,
                    vertexShader: shader3.vs,
                    fragmentShader: shader3.fs,
                    side: _3d.DoubleSide,
                    transparent: true,
                    /*lights: true*/
                })
                if(e.geometry) {
                    const edges = new _3d.EdgesGeometry(new _3d.Geometry().fromBufferGeometry(e.geometry))
                    const line = new _3d.LineSegments(edges, new _3d.LineBasicMaterial({
                        color: '#fffd02'
                    }))
                    object.add(line)
                }
            })
            scene.add(object)
        }
    },
    {
        type: 'obj',
        url: 'data/baisheng.obj',
        onLoad: function (object) {
            object.scale.set(0.025,0.05,0.025)
            object.rotateY( -Math.PI / 2)
            object.position.set(-50,0.1,-20.58)

            object.traverse(e => {
                e.material =  new _3d.ShaderMaterial({
                    uniforms: shader3.uniforms,
                    vertexShader: shader3.vs,
                    fragmentShader: shader3.fs,
                    side: _3d.DoubleSide,
                    transparent: true,
                    /*lights: true*/
                })
                if(e.geometry) {
                    const edges = new _3d.EdgesGeometry(new _3d.Geometry().fromBufferGeometry(e.geometry))
                    const line = new _3d.LineSegments(edges, new _3d.LineBasicMaterial({
                        color: '#fffd02'
                    }))
                    object.add(line)
                }
            })
            scene.add(object)
        }
    },
    {
        type: 'obj',
        url: 'data/lvdu.obj',
        onLoad: function (object) {
            object.scale.set(0.025,0.05,0.025)
            object.rotateY( -Math.PI / 2)
            object.position.set(-206.4,0.1,45.73)

            shader3.uniforms.gradualPositionYStart.value = 0
            shader3.uniforms.gradualPositionYEnd.value = 200
            shader3.uniforms.gradualColorStart.value = new _3d.Color('#00FFFF')
            shader3.uniforms.gradualColorEnd.value = new _3d.Color('#fffd02')
            shader3.uniforms.circleCenter.value = new _3d.Vector3(-1000,0,0)
            shader3.uniforms.colLineColor.value = shader3.uniforms.rowLightColor.value = new _3d.Color('#0303ff')
            shader3.uniforms.colLineWidth.value = 20
            shader3.uniforms.rowLightWidth.value = 50
            object.traverse(e => {
                e.material =  new _3d.ShaderMaterial({
                    uniforms: shader3.uniforms,
                    vertexShader: shader3.vs,
                    fragmentShader: shader3.fs,
                    side: _3d.DoubleSide,
                    transparent: true,
                   /* lights: true*/
                })
                if(e.geometry) {
                    const edges = new _3d.EdgesGeometry(new _3d.Geometry().fromBufferGeometry(e.geometry))
                    const line = new _3d.LineSegments(edges, new _3d.LineBasicMaterial({
                        color: '#fffd02'
                    }))
                    object.add(line)
                }
            })
            scene.add(object)
        }
    },
    {
        type: 'obj',
        url: 'data/tengbai.obj',
        onLoad: function (object) {
            object.scale.set(0.03,0.05,0.03)
            object.rotateY( -Math.PI / 2)
            object.position.set(-118.12,0.1,-97.93)

            object.traverse(e => {
                e.material =  new _3d.ShaderMaterial({
                    uniforms: shader3.uniforms,
                    vertexShader: shader3.vs,
                    fragmentShader: shader3.fs,
                    side: _3d.DoubleSide,
                    transparent: true,
                    // lights: true
                })
                if(e.geometry) {
                    const edges = new _3d.EdgesGeometry(new _3d.Geometry().fromBufferGeometry(e.geometry))
                    const line = new _3d.LineSegments(edges, new _3d.LineBasicMaterial({
                        color: '#fffd02'
                    }))
                    object.add(line)
                }
            })
            scene.add(object)
        }
    },
    {
        type: 'obj',
        url: 'data/yintai.obj',
        onLoad: function (object) {
            object.scale.set(0.03,0.05,0.03)
            object.position.set(-0.34,0.1,-78.83)

            object.traverse(e => {
                e.material =  new _3d.ShaderMaterial({
                    uniforms: shader3.uniforms,
                    vertexShader: shader3.vs,
                    fragmentShader: shader3.fs,
                    side: _3d.DoubleSide,
                    transparent: true,
                  /*  lights: true*/
                })
                if(e.geometry) {
                    const edges = new _3d.EdgesGeometry(new _3d.Geometry().fromBufferGeometry(e.geometry))
                    const line = new _3d.LineSegments(edges, new _3d.LineBasicMaterial({
                        color: '#fffd02'
                    }))
                    object.add(line)
                }
            })
            scene.add(object)
        }
    },
    {
        type: 'obj',
        url: 'data/river.obj',
        onLoad: function (obj) {
            // water
            const  params = {
                color: '#ffffff',
                scale: 3,
                flowX: 1,
                flowY: 1
            }
            const water = new _3d.Water( obj.children[0].geometry.clone(), {
                color: params.color,
                scale: params.scale,
                flowDirection: new _3d.Vector2( params.flowX, params.flowY ),
                textureWidth: 1024,
                textureHeight: 1024,
                normalMap0: textureLoader.load('../../images/ysThree/water/Water_1_M_Normal.jpg'),
                normalMap1: textureLoader.load('../../images/ysThree/water/Water_2_M_Normal.jpg'),
            })
            water.position.y = 0.1
            scene.add( water)
        }
    }
]

const pro = ys.progress.render({
    name :'#pro',
    tips: `${0}/${objFileList.length}件 -- 0%`,
    percent:'0%'
})

app.iterateLoad(objFileList, onProgress, onLoad)

function onProgress(xhr, fileIndex) {
    if (xhr.lengthComputable) {
        const  percentComplete =  parseInt(Math.round( (xhr.loaded / xhr.total) * 100, 2))+'%'
        ys.progress.set(pro,{
            percent: percentComplete,
            tips: `${fileIndex}/${objFileList.length}件 -- ${percentComplete}`
        })
    }
}

function onLoad() {
    console.log('模型加载完毕')
    ok = true
    $('.pro-layer').remove()
    addSky()
    addRoadName()
    addRoadLine()
    addLabel()
    lightBarTexture = textureLoader.load('images/lightray.png')
    lightBarParticlesTexture = textureLoader.load('images/particles.png')
    lightBarParticlesTexture.wrapS = _3d.RepeatWrapping;
    lightBarParticlesTexture.wrapT = _3d.RepeatWrapping;
    addLightBar([-166.84,0.8,-6.43], 0 ,'#ffff00')
    addLightBar([65.54,0.8,73.32], 0 ,'#51ff3e')
    addLine()
    addScan([-205.42,0.8,48.38])
    setTimeout(() => {
       flyTo()
        scene.traverse(e => {
            e.renderOrder = app.renderOrder ++
        })
    },500)
}

function addSky() {
    const texture  = new _3d.CubeTextureLoader()
        .setPath( '../../images/ysThree/sky/' )
        .load( [
            'px.jpg',//右(-1,0,0)
            'nx.jpg',//左(1,0,0)
            'py.jpg',//上(0,1,0)
            'ny.jpg',//下(0,-1,0)
            'pz.jpg',//前(0,0,1)
            'nz.jpg'//后(0,0,-1)
        ] );
    scene.background = texture

    const floorTexture = textureLoader.load('images/floor.png')
    floorTexture.wrapT =  floorTexture.wrapS = _3d.RepeatWrapping
    floorTexture.repeat.set(20, 20)
    const plane = new _3d.Mesh( new _3d.PlaneBufferGeometry(500,500),  new _3d.MeshBasicMaterial({
        map: floorTexture,
        side: _3d.DoubleSide,
        opacity: 0.5,
        transparent: true
    }))
    plane.rotateX(Math.PI/2)
    scene.add(plane)
    plane.position.set(-100,0,0)
}

function addRoadName() {
    const labelList = [
        {
            position: [-203.76,0.2,21.22],
            name: 'css2d-1',
            con: '新手上路东',
            callback(e){
                e.rotateY(- Math.PI / 360*20 + Math.PI / 360*50)
                e.rotateX(-Math.PI / 2)
            }
        },
        {
            position: [-91.64,0.2,6.20],
            name: 'css2d-2',
            con: '通天大道',
            callback(e){
                e.rotateY(- Math.PI / 360*20 + Math.PI / 360*20)
                e.rotateX(-Math.PI / 2)
            }
        },
        {
            position: [-122.10,0.2,-64.31],
            name: 'css2d-3',
            con: '必由之路东',
            callback(e){
                e.rotateY(- Math.PI / 360*20)
                e.rotateX(-Math.PI / 2)
            }
        },
        {
            position: [-62.34,0.2,-37.47],
            name: 'css2d-4',
            con: '初出茅路',
            callback(e){
                e.rotateY(-Math.PI / 2 - Math.PI / 360*40)
                e.rotateX(-Math.PI / 2)
            }
        },
        {
            position: [-1.63,0.2,4.39],
            name: 'css2d-5',
            con: '新手上路西',
            callback(e){
                e.rotateX(-Math.PI / 2)
            }
        },
        {
            position: [-133.61,0.2,-82.67],
            name: 'css2d-6',
            con: '学海之路',
            callback(e){
                e.rotateY(-Math.PI / 2 - Math.PI / 360*10)
                e.rotateX(-Math.PI / 2)
            }
        },
        {
            position: [-160.75,0.2,31.96],
            name: 'css2d-7',
            con: '书山有路',
            callback(e){
                e.rotateY(-Math.PI / 2 + Math.PI / 360*20)
                e.rotateX(-Math.PI / 2)
            }
        },
        {
            position: [-51.30,0.2,32.81],
            name: 'css2d-8',
            con: '轻车熟路',
            callback(e){
                e.rotateY(-Math.PI / 2 - Math.PI / 360*10)
                e.rotateX(-Math.PI / 2)
            }
        },
        {
            position: [-112.45,0.2,40.74],
            name: 'css2d-9',
            con: '穷家富路',
            callback(e){
                e.scale.set(0.15,0.15,0.15)
                e.rotateY(-Math.PI / 2 + Math.PI / 360*20)
                e.rotateX(-Math.PI / 2)
            }
        },
        {
            position: [5.33,0.2,-37.52],
            name: 'css2d-10',
            con: '必由之路西',
            callback(e){
                e.scale.set(0.15,0.15,0.15)
                e.rotateY( -Math.PI / 360*20)
                e.rotateX(-Math.PI / 2)
            }
        },
        {
            position: [-20.33,0.2,-60.16],
            name: 'css2d-11',
            con: '并无捷径',
            callback(e){
                e.scale.set(0.1,0.1,0.1)
                e.rotateY( -Math.PI / 2  -Math.PI / 360*20)
                e.rotateX(-Math.PI / 2)
            }
        },
        {
            position: [-137.63,0.2,57.48],
            name: 'css2d-11',
            con: '羊肠小径',
            callback(e){
                e.scale.set(0.1,0.1,0.1)
                e.rotateY(Math.PI / 360*20)
                e.rotateX(-Math.PI / 2)
            }
        },
    ]
    const roadNameGroup = new _3d.Group()
    scene.add(roadNameGroup)
    let I = 0
    forIt()
    function forIt() {
        app.createHtmlCanvas(html2canvas,{
            element: `<div class="roadName">${labelList[I].con}</div>`,
            type: 'plane', // type: 'plane'
            width: 60,
            height: 20,
            name: labelList[I].name,
            parent: roadNameGroup,
            position: labelList[I].position,
            scale: [0.2,0.2,0.2],
            callback:function (e) {
                if(labelList[I].callback) labelList[I].callback(e)
                e.renderOrder  = app.renderOrder
                I++
                if(I === labelList.length ) {

                }else {
                    forIt()
                }
            }
        })
    }
}

function addRoadLine() {
    const roadLineGroup = new  _3d.Group()
    scene.add(roadLineGroup)
    const Y = 0.4
    const list = [
        [
            [-232.91,Y,31.56],
            [-194.11,Y,17.08],
            [-126.88,Y,7.00],
            [-48.77,Y,9.18],
            [7.52,Y,4.25],
            [79.79,Y,1.17],
        ],
        [
            [-151.76,Y,91.24],
            [-162.58,Y,22.27],
            [-164.68,Y,7.14],
            [-165.19,Y,2.20],
            [-153.59,Y,-8.13],
            [-154.39,Y,-18.75],
            [-140.14,Y,-47.98],
            [-131.59,Y,-110.82],

        ],
        [
            [-108.29,Y,82.18],
            [-112.83,Y,42.34],
            [-114.33,Y,6.88],
            [-97.20,Y,5.75],
            [-97.33,Y,2.37],
            [-98.03,Y,-30.32],
            [-97.83,Y,-36.03],
            [-83.63,Y,-111.59]
        ],
        [
            [-47.02,Y,-109.39],
            [-59.61,Y,-48.12],
            [-70.15,Y,-10.37],
            [-69.40,Y,9.00],
            [-47.77,Y,10.17],
            [-49.54,Y,22.58],
            [-58.48,Y,98.79]
        ],
        [
            [-30.00,Y,50.65],
            [-28.71,Y,5.32],
            [-25.01,Y,-19.03],
            [-14.13,Y,-107.34]

        ],
        [
            [73.21,Y,-29.50],
            [17.21,Y,-36.38],
            [-187.45,Y,-78.02],
        ],
        [
            [-182.60,Y,61.32],
            [-153.45,Y,59.85],
            [-111.24,Y,51.91],
            [-79.44,Y,45.75],
            [-53.82,Y,49.44],
            [-29.92,Y,45.72]
        ]
    ]
    spriteLightTexture = textureLoader.load("../../images/ysThree/red_line2.png")
    spriteLightTexture2 = textureLoader.load("../../images/ysThree/green_line2.png")
    spriteLightTexture.wrapS = spriteLightTexture.wrapT = _3d.RepeatWrapping;
    spriteLightTexture.repeat.set(10, 1)
    spriteLightTexture2.wrapS = spriteLightTexture2.wrapT = _3d.RepeatWrapping;
    spriteLightTexture2.repeat.set(10, 1)
    spriteLightTexture.needsUpdate = true
    spriteLightTexture2.needsUpdate = true
    const ml = new _3d.MeshBasicMaterial({
        map : spriteLightTexture,
        side:_3d.BackSide,
        transparent:true,
    })
    const m2 = new _3d.MeshBasicMaterial({
        map : spriteLightTexture2,
        side:_3d.BackSide,
        transparent:true,
    })
    list.forEach((e,i) => {
        const line2 = app.createAnimateLine({
            type: 'pipe',
            pointList: e,
            material: i%2 === 0 ? ml : m2,
            number: 50,
            radius: 0.15
        })
        roadLineGroup.add(line2)
    })
}

function addLabel() {
    const group = new  _3d.Group()
    scene.add(group)
    //
    const labelList = [
        {
            name: '',
            tit: '四海城',
            icon: 'ys-icon-movie',
            position: [-117.93,30,-98.20],
        },
        {
            name: '',
            tit: '天河城',
            icon: 'ys-icon-cloud',
            position: [-0.51,30,-80.31],
        },
        {
            name: '',
            tit: '珠江新城',
            icon: 'ys-icon-coffee',
            position: [-50.29,30,-22.47],
        },
        {
            name: '',
            tit: '粤海广场',
            icon: 'ys-icon-coffee',
            position:[-10.61,30,44.76],
        },
        {
            name: '',
            tit: '正佳广场',
            icon: 'ys-icon-goodCar',
            position: [-205.42,30,48.38],
        }
    ]

    let I = 0
    forIt()
    function forIt() {
        const g = new _3d.Group()
        const mat = new _3d.MeshBasicMaterial( {
            color: '#ff4403',
            wireframe: true
        })
        const geometry = new _3d.ConeGeometry( 2, 4, 4 )
        group.add(g)
        const cone1 = new _3d.Mesh( geometry, mat )
        labelist.push(g)
        app.createHtmlCanvas(html2canvas,{
            element: `<div class="buildingName">
<div class="buildingName-box">
  <div class=""><i class="ys-icon ${labelList[I].icon}"></i></div>
  <div class="">${labelList[I].tit}</div>
</div>
</div>`,
            type: 'sprite',
            name: labelList[I].name,
            parent: g,
            position: labelList[I].position,
            scale: [10,10,10],
            callback:function (e) {
                if(labelList[I].callback) labelList[I].callback(e)
                const cone = cone1.clone()
                cone.position.set( labelList[I].position[0], labelList[I].position[1] - 5, labelList[I].position[2])
                cone.rotateX(Math.PI)
                g.add(cone)
                e.renderOrder  = app.renderOrder


                const circle = new _3d.Mesh(  new _3d.CircleGeometry( 15, 32 ),  new _3d.MeshBasicMaterial( {
                    map: textureLoader.load("images/circular.png"),
                    side:_3d.DoubleSide,
                    transparent: true,
                    depthWrite: true,
                    alphaTest: 0.2
                }));
                circle.position.set(labelList[I].position[0],0.8, labelList[I].position[2])
                circle.name = 'circleZ'
                circle.rotateX(Math.PI / 2)
                circle.renderOrder = app.renderOrder++
                circleList.push(circle)
                scene.add(circle)


                I++
                if(I === labelList.length ) {

                }else {
                    forIt()
                }
            }
        })
    }
}

//添加雷达扫描
function addLightBar(position,type,color) {
    if(type === 0) {
        const cGeo =  new _3d.CircleGeometry( 10, 100 )
        const circle = new _3d.Mesh( cGeo,  new _3d.MeshBasicMaterial( {
            map: textureLoader.load("images/circle.png"),
            color: color,
            side:_3d.DoubleSide,
            transparent: true
        } ) );
        circle.position.set(position[0],0.8 ,position[2])
        circle.name = 'circleZ'
        circle.rotateX(Math.PI / 2)
        circle.renderOrder = app.renderOrder ++

        const ring  = new _3d.Mesh( new _3d.RingBufferGeometry( 10, 9.8, 36 ), new _3d.MeshBasicMaterial( { color: color, side: _3d.DoubleSide }) );
        ring.position.set(position[0],0.8 ,position[2])
        ring.rotateX(Math.PI / 2)
        scene.add( circle,ring )
        circleList.push(circle)

    }else  {

    }
}

//添加扫描墙体
function addScan(position) {
    const R = 1,H = 8
    const geometry = new _3d.CylinderGeometry( R, R, H, 32 );
    const cylinder = new _3d.Mesh( geometry, [
        new _3d.MeshBasicMaterial( {map: textureLoader.load("images/wall.png"),side:_3d.DoubleSide,transparent:true, depthWrite: true ,alphaTest: 0.1} ),
        new _3d.MeshBasicMaterial( {transparent:true,opacity:0,side:_3d.DoubleSide, depthWrite: true ,alphaTest: 0.1} ),
        new _3d.MeshBasicMaterial( {transparent:true,opacity:0,side:_3d.DoubleSide, depthWrite: true ,alphaTest: 0.1} )
    ])
    cylinder.position.set(position[0],0.8, position[2])
    cylinder.renderOrder = app.renderOrder++
    scanList.push(cylinder)
    scene.add(cylinder)
}

// 添加垂直飞行
function addLine() {
    const list = [
        [-204.63,11.00,-96.94],
        [-141.23,16.00,-92.10],
        [-131.17,15.00,-69.59],
        [-101.07,13.00,-34.15],
        [-103.97,12.50,11.06],
        [-142.36,12.00,14.44],
        [-163.15,10.00,42.02],
        [-197.43,11.00,23.96],
        [-190.41,9.73,-35.76],
        [-160.38,9.00,72.09],
        [-109.16,2.48,56.45],
        [-63.51,13.10,-8.07],
        [3.03,11.50,-19.42],
        [-9.36,13.50,34.20],
        [-27.67,14.50,-49.36],
        [35.97,11.00,-13.93],
        [-35.08,14.50,-50.56],
        [38.04,11.13,-109.29],
        [69.23,5.00,-97.47],
        [64.16,8.56,-8.76],
        [33.43,9.00,8.40],
        [23.99,11.50,73.63],
        [-27.50,4.00,88.81],
        [-63.19,11.50,83.97],
        [-122.23,7.20,65.73]
    ]

    spriteLightTexture3 = textureLoader.load("../../images/ysThree/blue_line.png")
    spriteLightTexture3.wrapS = spriteLightTexture3.wrapT = _3d.RepeatWrapping
    spriteLightTexture3.repeat.set(5, 1)
    spriteLightTexture3.needsUpdate = true
    const ml = new _3d.MeshBasicMaterial({
        map : spriteLightTexture3,
        side: _3d.BackSide,
        transparent:true,
    })
    list.forEach((e,i) => {
        const line2 = app.createAnimateLine({
            type: 'pipe',
            pointList: [e , [e[0], e[1] + 50, e[2]]],
            material: ml,
            number: 50,
            radius: 0.15
        })
        scene.add(line2)
    })
}


function flyTo() {
    const Y = 5
    const list =[
        {
            camera: [-194.11,Y,17.08],
            controls: [-194.11-cc.x,Y-cc.y,17.08-cc.z],
            duration: 1000,
        },
        {
            camera: [-126.88,Y,7.00],
            controls: [-126.88-cc.x,Y-cc.y,7.00-cc.z],
            duration: 1000,
        },
        {
            camera:  [-48.77,Y,9.18],
            controls: [-48.77-cc.x,Y-cc.y,9.18-cc.z],
            duration: 1000,
        },
        {
            camera:  [7.52,Y,4.25],
            controls: [7.52-cc.x,Y-cc.y,4.25-cc.z],
            duration: 1000,
        },
        {
            camera: [79.79,Y,1.17],
            controls: [79.79-cc.x,Y-cc.y,1.17-cc.z],
            duration: 1000,
        },
        {
            camera:  [-45.806,141,-18],
            controls:  [-49.63,0,-20.57],
            duration: 2000,
        },
        {
            camera:  [6.94,15.96,71.62],
            controls:  [-49.63,0,-20.57],
            duration: 1500,
        },
        {
            camera: [24.14,81.82,-31.19],
            controls:  [-49.63,0,-20.57],
            duration: 2000,
        },
        {
            camera:  [24.72,15.96,-102.59],
            controls:  [-49.63,0,-20.57],
            duration: 1500,
        },
        {
            camera:  [-59.14,180.86,-124.01],
            controls:  [-49.63,0,-20.57],
            duration: 2000,
        },
        {
            camera:  [-153.50,21.71,-134.31],
            controls:  [-49.63,0,-20.57],
            duration: 1500,
        },
        {
            camera:  [-255.51,105.81,-100.04],
            controls:  [-49.63,0,-20.57],
            duration: 2000,
        },
        {
            camera:  [-279.43,36.27,86.82],
            controls:  [-49.63,0,-20.57],
            duration: 1500,
        },
        {
            camera:  [-88.61,159.78,172.71],
            controls:  [-49.63,0,-20.57],
            duration: 2000,
        },
        {
            camera:  [13.63,10.83,-10.29],
            controls:  [-49.63,0,-20.57],
            duration: 1500,
        }
    ]
    let i = 0
    forIt()
    function forIt() {
        app.flyTo({
            position: list[i].camera,
            controls: list[i].controls,
            duration: list[i].duration,
            done: function () {
                i++
                if(i === 5) {
                    controls.target.set(-49.63,0,-20.57)
                }
                if(i === list.length) {
                    controls.autoRotate = true
                    controls.autoRotateSpeed = -10
                    setTimeout(() => {
                        controls.autoRotate = false
                    },8000)
                }
                else {
                    forIt()
                }
            }
        })
    }
}

//
/*app.getClickPoint(e => {
    ys.message(`[${e.x.toFixed(2)},${e.y.toFixed(2)},${e.z.toFixed(2)}]`)
})
$('.ys-btn-sm').click(function () {
   const e = camera.position
    ys.message(`[${e.x.toFixed(2)},${e.y.toFixed(2)},${e.z.toFixed(2)}]`)
})*/


let x = 0
let s = 0
let p  = 1
app.render(() => {
    if(ok) {
        composer.render()
       // renderer.render(scene,camera)
        controls.update()

        x = x + 0.01
        s = s + 0.05
        p = p - 0.001

        modelShader.uniforms.rowLightHeight.value =(Math.sin(x)+1)*10 -1 // -1 -- 19
        modelShader.uniforms.circleMinR.value = modelShader.uniforms.circleMinR.value < 100 ? modelShader.uniforms.circleMinR.value + 0.5 : 0.25

        shader3.uniforms.colLineZ.value = (Math.sin(x))* 300
        shader3.uniforms.rowLightHeight.value = shader3.uniforms.rowLightHeight.value > 500 ?  0 : shader3.uniforms.rowLightHeight.value + 0.8

        if(spriteLightTexture) spriteLightTexture.offset.x -= 0.01
        if(spriteLightTexture2) spriteLightTexture2.offset.x -= 0.01
        if(spriteLightTexture3) spriteLightTexture3.offset.x -= 0.02

        labelist.forEach((e, i) => {
            e.position.y =  e.position.y + (Math.sin(x*1.2+i))*0.05
        })
        circleList.forEach(e =>{
            e.rotateZ(0.02)
        })
        if(s>20) {s = 0;p = 1}
        scanList.forEach(e => { e.scale.set(1+s ,1,1+ s);e.material[0].opacity = p })
    }
})